Marcos

Edit 0 2 …

17frames.pdf

Introducción a los marcos

Gracias a la tecnología de los marcos puede mostrar varias páginas HTML en diferentes áreas al mismo tiempo. Estas áreas se llaman marcos.



 Los marcos no se encuentran en las especificaciones de HTML 3.x, de modo que el DTD debe mostrar la página como si hubiera sido escrita en HTML 4.0.

Creación de marcos

Para crear un sitio Web que contenga marcos, basta con crear un archivo con la disposición de los marcos. Este archivo HTML es especial ya que usa la etiqueta <FRAMESET> en lugar de la etiqueta<BODY>. <FRAMESET> es la etiqueta que define los tamaños de los marcos por sus dimensiones en píxeles o porcentajes (%).
Estos son tres ejemplos:
  • 2 marcos verticales
  • 2 marcos horizontales
  • 1 marco vertical y 2 horizontales

Ejemplo Nº 1



<span style="color: #324354; font-family: 'Courier New',Courier,mono;">[[#exemple1]]<FRAMESET COLS="20%, 80%"> <FRAME SRC="frame1.htm" NAME="left"> <FRAME SRC="frame2.htm" NAME="right"> </FRAMESET></span>
<span style="color: #324354; font-family: 'Courier New',Courier,mono;">[[#exemple1]]</span>
external image html-images-frame1.gif
<span style="color: #324354; font-family: 'Courier New',Courier,mono;">[[#exemple1]]</span>

Ejemplo Nº 2

<span style="color: #324354; font-family: 'Courier New',Courier,mono;">[[#exemple1]]</span>


<span style="color: #324354; font-family: 'Courier New',Courier,mono;">[[#exemple1]]</span>
<span style="color: #324354; font-family: 'Courier New',Courier,mono;">[[#exemple1]]<FRAMESET ROWS="20%, 80%">
[[#exemple1]] <FRAME SRC="frame1.htm" NAME="left">
[[#exemple1]] <FRAME SRC="frame2.htm" NAME="right">
 
 
[[#exemple1]]</FRAMESET></span>
external image html-images-frame2.gif
<span style="color: #324354; font-family: 'Courier New',Courier,mono;">[[#exemple1]]</span>

Ejemplo Nº 3

<span style="color: #324354; font-family: 'Courier New',Courier,mono;">[[#exemple1]]</span>
<span style="color: #324354; font-family: 'Courier New',Courier,mono;">[[#exemple1]]<FRAMESET COLS="20%, 80%">
[[#exemple1]] <FRAME SRC="frame1.htm" NAME="left">
[[#exemple1]] <FRAMESET ROWS="50%, 50%">
[[#exemple1]] <FRAME SRC="frame2.htm" NAME="upper_right">
[[#exemple1]] <FRAME SRC="frame3.htm" NAME="lower_right">
 
[[#exemple1]]</FRAMESET> </span>
external image html-images-frame3.gif

Atributos de la etiqueta <FRAMESET>



Atributo
 Valor
 Acción
Rows
 porcentaje (entre 1 y 100)
valor en píxeles
Estableciendo uno de los valores y asignando al otro el valor*, el valor se ajusta automáticamente.
 Marco horizontal
Cols
 porcentaje en píxeles
Estableciendo uno de los valores y asignando al otro el valor*, el valor se ajusta automáticamente.
 Marco vertical
Frameborder
 YES
NO
 Indica si el marco tiene o no un borde
Border=n
 n es un valor que define el tamaño del borde
 Indica el tamaño del borde
Bordercolor
 Nombre del color
Valor hexadecimal del color
 Indica el color del borde
Framespacing=n
 n es el valor que define el espacio entre los marcos
 Indica el espacio entre los marcos
 
<span style="color: #324354; font-family: 'Courier New',Courier,mono;">[[#frame]]</span>

Atributos de la etiqueta <FRAMESET>

La etiqueta <FRAME>se usa para definir uno o varios marcos dentro de la etiqueta <FRAMESET>


Atributo
 Valor
 Acción
Src
 Direcciones URL
 Define la ubicación de la página que se debe mostrar en el marco
NAME
 "Nombre"
 Define un nombre que permitirá mostrar otro documento en el marco mediante el atributo Target
Marginwidth=n
 n es un entero que especifica el número de píxeles
 Tamaño de los márgenes laterales
Marginheight=n
 n es un entero que especifica el número de píxeles
 Tamaño de los márgenes superior e inferior
Frameborder
 YES
NO
 Determina si los marcos tienen o no borde
Border=n
 n es un entero que especifica el número de píxeles
 N es un entero que especifica el valor en píxeles. Tamaños del espacio entre los marcos (solamente para Netscape)
Noresize
 (Ninguna)
 Impide que el usuario modifique los marcos (No es el valor predeterminado)
Scrolling
 YES
NO
AUTO
 Habilita o no las barras de desplazamiento (Auto permite que el navegador decida si es necesario o no habilitarlas)
 
<span style="color: #324354; font-family: 'Courier New',Courier,mono;">[[#navigateurs]]</span>

¿Cómo pueden evitarse errores que surgen de navegadores no compatibles?

Las etiquetas <NOFRAMES> y </NOFRAMES> se usan para especificar qué texto HTML debe aparecer si el navegador no tiene marcos habilitados. El texto entre las etiquetas <NOFRAMES> y </NOFRAMES> debe, por lo tanto, contener las etiquetas <BODY> ... </BODY>.
Ejemplo:


<span style="background-color: #ffffff; color: #324354; font-family: 'Courier New',Courier,mono;"><FRAMESET COLS="20%, 80%">
 
<FRAME SRC="frame1.htm" NAME="left">
 
<FRAME SRC="frame2.htm" NAME="right">
 
</FRAMESET></span>


<span style="background-color: #ffffff; color: #324354; font-family: 'Courier New',Courier,mono;"><NOFRAMES> <BODY> Este código HTML requiere un navegador que admita marcos. Perdone las molestias. </BODY> </NOFRAMES></span>
<span style="background-color: #ffffff; color: #324354; font-family: 'Courier New',Courier,mono;">[[#liens]]</span>

Designación de un marco con un hipervínculo

Para mostrar vínculos en uno de los marcos, use el atributo TARGET en la etiqueta <A HREF ..> para especificar el nombre del marco dado por el atributo NAME en la etiqueta <FRAME>).
Por ejemplo:
<span style="background-color: #ffffff; color: #324354; font-family: 'Courier New',Courier,mono;"><A HREF="page.htm" TARGET="left"></span>


Valor Acción
 Acción
_self
 Muestra el destino en el mismo marco que el vínculo
_parent
 Muestra el destino en el marco de nivel superior siguiente
_blank
 Muestra el destino en una nueva ventana
_top
 Muestra el destino en toda la ventana del navegador